<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax + FomData 多文件上传</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uploadButton").click(function () {
                var fileInputJQ = $("input[name='multipartFileArr']");
                if (fileInputJQ.val() == "") {
                    alert("请先选择文件");
                    return;
                }
                /**
                 * 直接使用FormData的有参构造器创建对象
                 * 注意里面的对象参数是DOM对象，而不是JQuery对象，所以必须要转
                 * 这样封装的是整个Form表单数据，无论是多文件还是单文件都是一致的
                 **/
                var formData = new FormData($("#uploadForm")[0]);

                /**下面两个设置很关键，和平时使用时略有不同
                 * contentType: false->告诉jQuery不要去设置Content-Type请求头
                 * processData: false->告诉jQuery不要去处理发送的数据
                 * cache：缓存禁用不禁用，好像效果都一样
                 */
                $.ajax({
                    url: "/fileServer/multipleFileUpload",
                    type: 'POST',
                    data: formData,
                    cache: false,
                    dataType: "JSON",
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        alert(JSON.stringify(data))
                    },
                    error: function (data) {
                        console.log(JSON.stringify(data));
                        alert(JSON.stringify(data));
                    }
                });
            });
        });
    </script>
</head>
<body>

<h3>Ajax + FomData 多文件上传</h3>
<!--文件上传时method必须是post,enctype必须是multipart/form-data-->
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <!--多文件上传时，加上multiple属性-->
    <input type="file" name="multipleFile" multiple/><br>
    <input type="button" id="uploadButton" value="上传">
</form>

</body>
</html>